<template>
  <div class="digital-human-tip">
    <div v-if="showTip" class="tip-content" @click="hideTip">
      <div class="tip-icon">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17A1.5,1.5 0 0,1 10.5,15.5A1.5,1.5 0 0,1 12,14A1.5,1.5 0 0,1 13.5,15.5A1.5,1.5 0 0,1 12,17M12,10.5A1.5,1.5 0 0,1 10.5,9A1.5,1.5 0 0,1 12,7.5A1.5,1.5 0 0,1 13.5,9A1.5,1.5 0 0,1 12,10.5Z"/>
        </svg>
      </div>
      <div class="tip-text">
        <p>{{ currentTip }}</p>
      </div>
      <button class="tip-close" @click.stop="hideTip">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const showTip = ref(true)
const currentTip = ref('')

// 提示信息列表
const tips = [
  '点击屏幕可以打断数字人说话',
  '按Tab键也可以打断数字人',
  '可以通过底部按钮控制麦克风和摄像头',
  '数字人会根据你的语音进行实时回应',
  '支持多轮对话，数字人会记住上下文'
]

let tipInterval: number | null = null

// 方法
const hideTip = () => {
  showTip.value = false
}

const showNextTip = () => {
  const randomIndex = Math.floor(Math.random() * tips.length)
  currentTip.value = tips[randomIndex]
  showTip.value = true
}

// 生命周期
onMounted(() => {
  // 初始显示第一个提示
  currentTip.value = tips[0]
  
  // 每30秒显示一个新提示
  tipInterval = window.setInterval(() => {
    showNextTip()
  }, 30000)
  
  // 5秒后自动隐藏第一个提示
  setTimeout(() => {
    showTip.value = false
  }, 5000)
})

onUnmounted(() => {
  if (tipInterval) {
    clearInterval(tipInterval)
  }
})
</script>

<style scoped>
.digital-human-tip {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.tip-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  color: white;
  padding: 1rem;
  border-radius: 1rem;
  max-width: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: slideInRight 0.3s ease-out;
}

.tip-content:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-2px);
}

.tip-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #2196F3;
}

.tip-icon svg {
  width: 100%;
  height: 100%;
}

.tip-text {
  flex: 1;
}

.tip-text p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.tip-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.3s ease;
}

.tip-close:hover {
  color: white;
}

.tip-close svg {
  width: 100%;
  height: 100%;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .digital-human-tip {
    top: 10px;
    right: 10px;
    left: 10px;
  }
  
  .tip-content {
    max-width: none;
    padding: 0.75rem;
  }
  
  .tip-text p {
    font-size: 0.8rem;
  }
}
</style>
